<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ctxPath}/static/manage/css/x-admin.css" media="all">
    <link rel="stylesheet" href="${ctxPath}/static/manage/layui/css/layui.css" media="all">
    <script src="${ctxPath}/static/manage/layui/layui.js"></script>
    <script src="${ctxPath}/static/manage/js/jquery.js"></script>
    <script src="${ctxPath}/static/manage/js/util.js"></script>
</head>
<body>
<div class="x-body">
    <form class="layui-form" id="formUpdate">
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-inline">
                <input type="text" id="account" name="account" required lay-verify="required" class="layui-input" value="">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input" value="">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填</div>
        </div>
        <div class="layui-form-item openness">
            <label class="layui-form-label">用户性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" value="1" title="男性" lay-skin="primary" checked/>
                <input type="radio" name="sex" value="2" title="女性" lay-skin="primary" />
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-inline">
                <input type="password" id="pwdOne" name="password" required lay-verify="required" class="layui-input" value="">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" id="pwdTwo" name="pwdTwo" required lay-verify="required" class="layui-input" value="">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系电话</label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" class="layui-input"/>
            </div>
            <input class="layui-btn layui-inline" type="button" id="codeOne" value="获取验证码"></input>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" id="codeTwo" name="codeTwo"  class="layui-input" value=""/>
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生年月</label>
            <div class="layui-input-inline">
                <input type="text" id="birthday" name="birthdayToDate" class="layui-input" value=""/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户邮箱</label>
            <div class="layui-input-inline">
                <input type="text" id="userEmail" name="email" class="layui-input" value="">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内网IP</label>
            <div class="layui-input-inline">
                <input type="text" id="i_p" name="i_p" required lay-verify="required" class="layui-input" value="">
            </div>
            <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>必填</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">兴趣爱好</label>
            <div class="layui-input-inline">
                <input type="text" id="fun" name="fun" class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button class="layui-btn" type="button" lay-filter="*" lay-submit>提交</button>
        </div>
    </form>
</div>
</body>

<script>
    layui.use('laydate',function(){
        var laydate=layui.laydate;
        laydate.render({
            elem: '#birthday' //指定元素
        });
    })
</script>

<script>
    layui.use(['jquery', 'element', 'table', 'layer', 'util','form'], function() {
        var $ = layui.$, table = layui.table, layer = layui.layer, util = layui.util, form=layui.form;
        var codeOne;
        /*点击获取验证码*/
        $("#codeOne").on('click',function(){
            var phone=$("#phone").val();
            //校验手机号是否合法
            if(!checkMobile(phone)){
                alert("手机号码不合法");
                return false;
            }
            $("#codeOne").val("正在发送.");
            $.ajax({
                url:'/getCodeMessage',
                data:{
                    phone:phone
                },
                type:'post',
                dataType:'json',
                success:function(res){
                    codeOne = res;
                    alert(codeOne);
                    messageCode=res;
                }
            });
        });

        form.on('submit(*)', function(data){
            var phone = $("#phone").val();
            var pwdOne = $("#pwdOne").val();
            var pwdTwo = $("#pwdTwo").val();
            var codeTwo = $("#codeTwo").val();
            var userEmail = $("#userEmail").val();

            // 校验俩次密码是否一致，校验手机号是否合法
            if(pwdOne != pwdTwo){
                alert("俩次密码不一致，请重新输入");
                return false;
            }
            //校验验证码是否正确
            if(codeTwo == ""){
                alert("请输入验证码");
                return  false;
            }
            if(codeTwo != codeOne){
                alert("验证码错误，请重新输入");
                return false;
            }
            //验证邮箱是否为空
            if(userEmail == ""){
                alert("请输入邮箱");
                return false;
            }
            //校验邮箱是否合法
            if(!checkEmail(userEmail)){
                alert("你的邮箱不合法");
                return false;
            }
            $.ajax({
                url:'/registerUser',
                type:'post',
                data:data.field,
                success:function(result){
                    $.ajax({
                        url:'/sendEmail',
                        data:{
                            userEmail:userEmail
                        },
                        type:'get',
                        success:function(result){
                            alert("邮件发送成功"+result);
                        },error:function(result){
                            alert("邮件发送失败"+result);
                        }
                    });
                    alert(result);
                    if(result == "注册成功"){
                        window.parent.location.reload();
                    }
                },
                error:function(result){
                    alert("注册失败"+result);
                    window.location.reload();
                }

            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })

    })
</script>
</html>